<template>
    <div>
        <a-card class="mb-twelve video">
            <div class="tabs">
                <div @click="handleTabs(1)" class="tabs-item ">设备列表<span v-if="tabsIdx==1" class="tabs-item-active"></span></div>
                <div  @click="handleTabs(2)" class="tabs-item">监控视频<span v-if="tabsIdx==2" class="tabs-item-active"></span></div>
            </div>
        </a-card>

        <monitor-device v-if="tabsIdx==1"></monitor-device>
        <monitor-video v-if="tabsIdx==2"></monitor-video>
    </div>
</template>

<script>
import monitorDevice from './monitor-device.vue'
import MonitorVideo from './monitor-video.vue'

export default {
  components: { monitorDevice, MonitorVideo },
    name: "Video",
    data() {
        return {
            tabsIdx: 1
        }
    },
    methods: {
        handleTabs(num){
            this.tabsIdx = num
        },
    }
}
</script>
<style scoped lang="less">

/deep/ .ant-card-body{
    padding: 24px 24px 20px 24px;
}
.tabs{
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #A4A8C4;
}
.tabs-item{
    margin-right: 32px;
    position: relative;
    cursor: pointer;
}
.tabs-item-active{
    width: 56px;
    height: 4px;
    background: #96A2E7;
    border-radius: 2px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}

</style>
